<div class="layui-row">
  <div class="layui-col-lg3">
    <div class="layui-btn-group" id="device_handle_permi">
    <button class="layui-btn data_handle_btn" id="add_device_permi" style="display: none;">添加</button>
    <button class="layui-btn device_deliver"  style="display: none;" id="device_deliver_permi">转移</button>
    <button type="button" class="layui-btn" id="device_input_btn"  style="display: none;"><i class="layui-icon" ></i>文件导入</button>
    <!-- <button class="layui-btn layui-btn-danger data-delete-btn">启/停</button> -->
</div>
  </div>
  <div class="layui-col-lg3">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" l name="search_key"  placeholder="设备ID/名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <a class="layui-btn" lay-submit="" lay-filter="data-search-btn">搜索</a>
            </div>
        </div>
    </form>
  </div>
</div>

<table class="layui-table" id="base_info_manage_table" lay-filter="base_info_manage_table"></table>
<script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-edit" lay-event="del">删除</a>
    <!-- <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">启/停</a> -->
</script>
<script type="text/html" id="table_header">
  <p>设备管理表</p>
</script>
<!-- 添加数据表单开始 -->
<form  class="layui-form layui-form-pane " action="" id="handle_data_form" lay-filter="handle_data_form" style="padding: 10px;display: none;">
  <div class="layui-row">
    <div class="layui-col-md6">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">型号</label>
          <div class="layui-input-block">
            <select type="text" name="model"  id="device_model_select">
            </select>
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">设备ID</label>
          <div class="layui-input-block">
            <input type="text" name="device_id" lay-verify="required" lay-reqtext="必填项!" placeholder="必填" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

<!--       <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">sim卡</label>
          <div class="layui-input-block">
            <input type="text" name="iccid"  placeholder="sim卡号"  autocomplete="off" class="layui-input">
          </div>
        </div>
      </div> -->

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">设备名称</label>
          <div class="layui-input-block">
            <input type="text" name="user_name"  placeholder="设备自定义名称"  autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">备注</label>
          <div class="layui-input-block">
            <input type="text" name="remark"  placeholder="备注"  autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md6">
      <div class="layui-form-item">
        <div class="layui-inline">
          <input type="text" name="customize_title1"  placeholder="自定义标题1"  autocomplete="off" class="layui-form-label" >
          <div class="layui-input-block">
            <input type="text" name="customize_value1"  placeholder="自定义内容1"  autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <input type="text" name="customize_title2"  placeholder="自定义标题2"  autocomplete="off" class="layui-form-label" >
          <div class="layui-input-block">
            <input type="text" name="customize_value2"  placeholder="自定义内容2"  autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <input type="text" name="customize_title3"  placeholder="自定义标题3"  autocomplete="off" class="layui-form-label" >
          <div class="layui-input-block">
            <input type="text" name="customize_value3"  placeholder="自定义内容3"  autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">显示图标</label>
          <div class="layui-input-block">
            <input type="radio" name="icon"   value="default" class="layui-input" checked="">
            <img src="/static/show_icon/default.png" style="width: 40px;height: 40px">
            <input type="radio" name="icon"   value="car" class="layui-input">
            <img src="/static/show_icon/car.png" style="width: 40px;height: 40px">
            <input type="radio" name="icon"   value="zhu" class="layui-input">
            <img src="/static/show_icon/zhu.png" style="width: 40px;height: 40px">
            <input type="radio" name="icon"   value="yang" class="layui-input">
            <img src="/static/show_icon/yang.png" style="width: 40px;height: 40px">
            <input type="radio" name="icon"   value="niu" class="layui-input">
            <img src="/static/show_icon/niu.png" style="width: 40px;height: 40px">
            <input type="radio" name="icon"   value="cargo" class="layui-input">
            <img src="/static/show_icon/cargo.png" style="width: 40px;height: 40px">
            
          </div>
        </div>
      </div>
    </div>
  </div>
  <button class="layui-btn layui-btn-fluid" id="add_submit_btn" lay-submit lay-filter="add_submit" >提交</button>
</form>

<!-- 添加数据表单结束 -->


<!-- 修改数据表单开始 -->
<form  class="layui-form layui-form-pane " action="" id="edit_data_form" lay-filter="edit_data_form" style="padding: 10px;display: none;">

  <div class="layui-row">
    <div class="layui-col-md6">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">型号</label>
          <div class="layui-input-block">
            <select type="text" name="model"  id="change_device_model">
            </select>
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">设备ID</label>
          <div class="layui-input-block">
            <input type="text" name="device_id" readonly="" lay-verify="required" lay-reqtext="必填项!" placeholder="必填" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

<!--       <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">sim卡</label>
          <div class="layui-input-block">
            <input type="text" name="iccid"  placeholder="sim卡号"  autocomplete="off" class="layui-input">
          </div>
        </div>
      </div> -->

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">设备名称</label>
          <div class="layui-input-block">
            <input type="text" name="user_name"  placeholder="设备自定义名称"  autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">备注</label>
          <div class="layui-input-block">
            <input type="text" name="remark"  placeholder="备注"  autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item" style="display: none;">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">绑定类型</label>
          <div class="layui-input-block">
            <input type="text" name="kind"  placeholder="备注"  autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item" style="display: none;">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">绑定名称</label>
          <div class="layui-input-block">
            <input type="text" name="name"  placeholder="备注"  autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

    </div>

    <div class="layui-col-md6">
      <div class="layui-form-item">
        <div class="layui-inline">
          <input type="text" name="customize_title1"  placeholder="自定义标题1"  autocomplete="off" class="layui-form-label" >
          <div class="layui-input-block">
            <input type="text" name="customize_value1"  placeholder="自定义内容1"  autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <input type="text" name="customize_title2"  placeholder="自定义标题2"  autocomplete="off" class="layui-form-label" >
          <div class="layui-input-block">
            <input type="text" name="customize_value2"  placeholder="自定义内容2"  autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <input type="text" name="customize_title3"  placeholder="自定义标题3"  autocomplete="off" class="layui-form-label" >
          <div class="layui-input-block">
            <input type="text" name="customize_value3"  placeholder="自定义内容3"  autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">显示图标</label>
          <div class="layui-input-block">
            <input type="radio" name="icon"   value="default" class="layui-input" checked="">
            <img src="/static/show_icon/default.png" style="width: 40px;height: 40px">
            <input type="radio" name="icon"   value="car" class="layui-input">
            <img src="/static/show_icon/car.png" style="width: 40px;height: 40px">
            <input type="radio" name="icon"   value="zhu" class="layui-input">
            <img src="/static/show_icon/zhu.png" style="width: 40px;height: 40px">
            <input type="radio" name="icon"   value="yang" class="layui-input">
            <img src="/static/show_icon/yang.png" style="width: 40px;height: 40px">
            <input type="radio" name="icon"   value="niu" class="layui-input">
            <img src="/static/show_icon/niu.png" style="width: 40px;height: 40px">
            <input type="radio" name="icon"   value="cargo" class="layui-input">
            <img src="/static/show_icon/cargo.png" style="width: 40px;height: 40px">
            
          </div>
        </div>
      </div>
    </div>
  </div>
  <button class="layui-btn layui-btn-fluid" id="edit_submit_btn" lay-submit lay-filter="edit_submit" >提交</button>
</form>
<!-- 修改数据表单结束 -->

<!-- 设备转移表单 开始-->
<div class="layui-container" id="device_deliver_div" style="display: none;padding: 20px;width: 400px;overflow: auto;">
    <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green" style="text-align: center;">转移到</label>
      <div class="layui-input-block">
       <input type="text" list="deliver_target" name="" class="layui-input" id="dev_to_user">
        <datalist id="deliver_target">
        </datalist>
      </div>
    </div>
  </div>
  <table id="user_tree"  class="layui-table"></table>
</div>
<!-- 设备转移表单 结束-->

<!-- 设备导入处理开始 -->
<div class="layui-form-item" style="display: none;">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">id</label>
      <div class="layui-input-block">
        <input type="text" name="device_input"  autocomplete="off" class="layui-input" id="device_input">
      </div>
    </div>
</div>
<!-- 设备导入处理结束 -->

<!-- 引入把上传的表格转变为json的插件 -->
<script src="/static/js/xlsx.js"></script>
<!-- js代码开始 -->

<script type="text/javascript">

// $('.layui-body').attr('style','padding:10px;bottom:0px;left:0px') 
// $('.layui-side').hide()
console.log(user_permi)
if(user_permi=='superuser'){
  $('#add_device_permi').show()
  $('#device_input_btn').show()
  $('#device_deliver_permi').show()
}else if(user_permi=='管理员'){
  $('#add_device_permi').show()
  $('#device_deliver_permi').show()
}

var ajax_url='device';
// 设备数据表格渲染函数
var table_show=function(table_data){
  // device=table_data
  table.render({
    elem: '#base_info_manage_table',
    toolbar:'#table_header',
    data: table_data,
    id:'base_info_manage_table',
    cols: [[
        {type: "checkbox", fixed: "left"},
        {field: 'id',width:40, title: '序号',templet:function(d){
          return d.LAY_INDEX
        }},
        {field: 'user_name', title: '设备名称',sort:true},
        {field: 'device_id', title: '设备ID',sort:true},
        {field: 'model', title: '型号',sort:true},
        // {field: 'iccid', title: 'sim卡号',sort:true},
        {field: 'status', title: '状态',sort:true},
        {field: 'owner', title: '绑定',sort:true,templet:function(obj){
          var user_detail=eval('('+obj.user_detail+')')
          var user=''
          if(user_detail.name){
            user=user_detail.kind+','+user_detail.name
          }
          return user
        }},
        {field: 'auth_id', title: '授权码'},
        {field: 'user_detail', title: '附加信息',sort:true,templet:function(obj){
          var user_detail=obj.user_detail
          if(typeof(user_detail)!=='object'){
            user_detail=eval('('+user_detail+')')
          }
          var content='<p>'+user_detail.customize_title1+':'+user_detail.customize_value1+','+
                            user_detail.customize_title2+':'+user_detail.customize_value2+','+
                            user_detail.customize_title3+':'+user_detail.customize_value3+
                      '</p>'
          return content
        }},
        {field: 'owner', title: '账户归属',sort:true,templet:function(obj){
          return user_info_objs[obj.owner].visible_name
        }},
        {field: 'remark', title: '备注'},
        {field: 'date_added', title: '创建时间',sort:true},
        {title: '操作', minWidth: 110, templet: '#currentTableBar', fixed: "right", align: "center"}
    ]],
    limits: [10, 15, 20, 25, 50, 100],
    limit: 10,
    page: true
  });
}

// 首次用户数据加载,index页面加载设备和型号信息
get_info_ajax(ajax_url,'get_init_data',table_show)

// 监听添加操作
$(".data_handle_btn").on("click", function () {
    document.getElementById("handle_data_form").reset();
    form.render();
    fill_option(dev_model,'device_model_select','unique_id')
    img_upload_func('customize_icon')
    layer.open({
        type: 1
        ,title:'添加设备'
        ,area:['700px','auto']
        ,offset:'100px'  
        ,id: 'add_data' //防止重复弹出
        ,content:$('#handle_data_form')
        ,shade: 0 //不显示遮罩
      });
});

// 监听添加操作,并提交
form.on('submit(add_submit)',function(obj){
  if(obj.field.device_id.length<5){
    layer.msg('设备编码至少5位')
    return false
  }
  var base_info=package_data(obj.field)
  // console.log(base_info)
  post_info_ajax(base_info,ajax_url,'add',table_show)
  return false
})


// 监听编辑操作按钮
table.on('tool(base_info_manage_table)', function (obj) {
  var chose_data = obj.data;
  if(obj.event=='edit'){
    document.getElementById("edit_data_form").reset();
    fill_option(dev_model,'change_device_model','unique_id')
    var user_detail=chose_data.user_detail
    // jequery方法合并对象
    if(typeof(user_detail)!=='object'){
      user_detail=eval('('+user_detail+')')
    }
    chose_data = $.extend(chose_data,user_detail)
    form.val('edit_data_form',chose_data)
    form.render();
    layer.open({
      type: 1
      ,area:['700px','auto']
      ,offset:'100px'  
      ,id: 'edit_data' 
      ,content:$('#edit_data_form')
      ,shade: 0 //不显示遮罩
    }); 
    // 删除操作
  }else if(obj.event=='del'){
    layer.confirm("确定删除设备："+chose_data.device_id+"？",
              {btn: ['是', '否']}, 
              function (index) {
                console.log('del',chose_data)
                if(user_self.username=='demo'){
                  layer.msg('无权限')
                  return false
                }
                post_info_ajax(chose_data,ajax_url,'del',table_show)
              }
              ,function(){
                console.log('no')
                layer.closeAll()
              });
  }

});


// 监听修改操作,并提交
form.on('submit(edit_submit)',function(obj){
  var base_info=package_data(obj.field)
  // console.log(base_info)
  post_info_ajax(base_info,ajax_url,'edit',table_show)
  return false
})


//封装数据
var package_data=function(result){
  var user_detail={}
  user_detail['customize_title1']=result['customize_title1']
  user_detail['customize_title2']=result['customize_title2']
  user_detail['customize_title3']=result['customize_title3']
  user_detail['customize_value1']=result['customize_value1']
  user_detail['customize_value2']=result['customize_value2']
  user_detail['customize_value3']=result['customize_value3']
  if(result.kind!=null){
    user_detail['kind']=result.kind
    user_detail['name']=result.name
    delete result.name
    delete result.kind
  }else{
    user_detail['kind']=''
    user_detail['name']=''
  }
  user_detail['icon']=result['icon']
  result['user_detail']=JSON.stringify(user_detail)
  delete result.customize_title1
  delete result.customize_title2
  delete result.customize_title3
  delete result.customize_value1
  delete result.customize_value2
  delete result.customize_value3
  delete result.icon

  // console.log(result)
  return result
}


// 获取设备数据表格选中的数据，弹出用户结构弹窗，选择转移的目标用户，提交后台处理
$('.device_deliver').click(function(){
  var device_check=table.checkStatus('base_info_manage_table').data
  if(device_check.length===0){
    layer.msg('请选择需要转移的设备')
    return false
  }
  // 渲染用户树形结构
  tree.render({
    elem: '#user_tree'
    ,data: user_tree
    ,showCheckbox: false  //是否显示复选框
    ,id: 'id'
    ,onlyIconControl:true
    ,isJump: false //是否允许点击节点时弹出新窗口跳转
    ,text: {
            defaultNodeName: '未命名' //节点默认名称
            ,none: '无数据' //数据为空时的提示文本
          }   
    ,click: function(obj){
      var data = obj.data;  //获取当前点击的节点数据
      // console.log(data)
      if(data['name']=='all'){
        layer.msg('该选择无效！')
        return false
      }
      $('#dev_to_user').val(data['name'])
    }

  });
  // 加载所有下级用户名称
  for(var i=0;i<user_data.length;i++){
    var user_name_option='<option>'+user_data[i]['visible_name']+'</option>'
    $('#deliver_target').append(user_name_option)
  }
// 弹窗，展示用户树形结构，选择用户，提交后台
  layer.open({
        type: 1
        ,title:'设备转移'
        ,area:['400px','500px']
        ,offset:'100px'  //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
        ,id: 'device_deliver' //防止重复弹出
        ,content:$('#device_deliver_div')
        ,btn: ['提交','关闭']
        ,shade: 0 //不显示遮罩
        ,btn1: function(){
            var result={};
            var target_user=$('#dev_to_user').val()
            if (target_user==''){
              layer.msg('请选择目标用户')
              return false
            }
            var dev_to_user=[]
            for(var i=0;i<device_check.length;i++){
              if(device_check[i]['owner']!==result['target_user']){
                dev_to_user.push(device_check[i]['device_id'])
              }
            }
            result['device_id']=dev_to_user
            result['target_user']=target_user

            layer.confirm('确定转移到'+target_user, function (index) {
              // console.log(result)
              post_info_ajax(result,ajax_url,'change_owner',table_show)

            })
        }
        ,btn2: function(){
          layer.closeAll();
        }
      });

})


// 监听 导入 按钮
$('#device_input_btn').click(function(){
  var input = document.createElement('input');
  input.type = 'file';

  input.addEventListener('change', function() {
    var file = this.files[0];
    var reader = new FileReader();

    reader.onload = function (e) {
      var data = e.currentTarget.result;
      var wb = XLSX.read(data,{type:'binary'})
      var j_data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
      // console.log(j_data)
      if(j_data[0]['__EMPTY']!=null){
        layer.msg('表格出错')
        return false
      }

      var batch_add_data=[];
      for(var i=0;i<j_data.length;i++){
         if(j_data[i]['device_id']!==0 && j_data[i]['device_id']!=='0'  && j_data[i]['device_id']!=='' && j_data[i]['device_id']!=null){
          batch_add_data.push(j_data[i])
         }  
      }

      layer.confirm('确定导入'+batch_add_data.length.toString()+'台设备信息', function (index) {

        post_info_ajax(batch_add_data,ajax_url,'add_from_file')

      })
    }
    reader.readAsBinaryString(file)
  })

    input.click();
})


// 监听设备搜索操作
form.on('submit(data-search-btn)', function (data) {

  var search_key = data.field['search_key'];
  if(search_key!==''){
    // 调用index页面搜索函数
    var search_result=search_func(device,search_key,'user_name','device_id')
    // 表格重载
    table_show(search_result)
  }else{
    table_show(device)
  }
  return false;
});

</script>